page{
    height: 100%;
    }
.luckyTurntable {
    // position: relative;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-image:url('http://resource.160nurse.com/canvas/healthy/img/activity/bg_1.png');
    .top {
        width: 100%;
        height:50vw;
        background-image:url('//resource.160nurse.com/canvas/healthy/img/activity/title_0.png');
        background-size:100%;
        background-position:top;
        background-repeat:no-repeat;
        box-sizing: border-box;
        padding-top:32vw;
        line-height:6vw;
        text-align: center;
        font-size:4vw;
        color:#fff;
        .b{
            color:#FB5053;
        }
    }
    .turntable {
        width: 88vw;
        height: 88vw;
        margin: -5vw 6vw 0 6vw;
        position: relative;
        box-sizing: border-box;
        background-image:url('//resource.160nurse.com/canvas/healthy/img/activity/qiang_1.png');
        background-size:100% 100%;
        &.on{
            background-image:url('//resource.160nurse.com/canvas/healthy/img/activity/qiang_0.png');
        }
        .box{
            width:100%;
            position:absolute;
            z-index:1;
            height:100%;
            >view{
                position:absolute;
                z-index:5;
                width: 9vw;
                height:11vw;
                // margin-top: 1vw;
                .title {
                    position: absolute;
                    line-height: 3.6vw;
                    top: -5vw;
                    font-size: 3.6vw;
                    text-align: center;
                    width: 20vw;
                    transform: translateX(-28%);
                }
                image {
                    width: 9vw;
                    height:11vw;
                }
                // .title {
                //     position: absolute;
                //     width: 25vw;
                //     top: -2vw;
                //     left: 50%;
                //     margin-left: -50%;
                // }
            }
            >view:first-of-type{
                top: 26%;
                right: 37%;
                transform: rotate(26deg);
                color: #ff4081;
                // >view {
                //     margin-bottom: 1vw;
                // }
                // image {
                //     width: 11vw;
                //     height:11vw;
                // }
            }
            >view:nth-child(2){
                top: 37%;
                right: 28%;
                transform: rotate(68deg);
                color: #ff4081;
                // image {
                //     width: 13vw;
                //     height:13vw;
                // }

            }
            >view:nth-child(3) {
                bottom: 37%;
                right: 28%;
                transform: rotate(115deg);
                color: #fff;
                // >view{
                //     margin-bottom: 1vw;
                // }
                // image {
                //     width: 11vw;
                //     height:11vw;
                // }

            }
            >view:nth-child(4) {
                bottom: 27%;
                right: 38%;
                transform: rotate(158deg);
                color: #ff4081;
                // image {
                //     width: 13vw;
                //     height:13vw;
                // }
            }
            >view:nth-child(5) {
                bottom: 28%;
                left: 38%;
                transform: rotate(206deg);
                color: #ff4081;
                // > view {
                //     margin-bottom: 1vw;
                // }
                // image {
                //     width: 11vw;
                //     height:11vw;
                // }

            }
            >view:nth-child(6){
                bottom: 37%;
                left: 27%;
                transform: rotate(-110deg);
                color: #ff4081;
                // image {
                //     width: 13vw;
                //     height:13vw;
                // }

            }
            >view:nth-child(7) {
                top: 37%;
                left: 27%;
                transform: rotate(-70deg);
                color: #fff;
                // > view {
                //     margin-bottom: 1vw;
                // }
                // image {
                //     width: 11vw;
                //     height:11vw;
                // }

            }
            >view:nth-of-type(8) {
                top: 25%;
                left: 37%;
                transform: rotate(-26deg);
                color: #ff4081;
                // image {
                //     width: 12vw;
                //     height:12vw;
                // }

            }
        }
        .turn {
            position:absolute;
            width: 73%;
            height:73%;
            margin:0;
            z-index:2;
            top:13.5%;
            left:13.5%;
        }
    }
    .arrow {
        position: absolute;
        width: 10vw;
        height:13.9vw;
        top: 70vw;
        left: 50%;
        z-index:8;
        transform: translateX(-50%);
    }
    .go {
        position: absolute;
        width: 25vw;
        height:25vw;
        top: 75.5vw;
        left: 50%;
        margin-left:-12.5vw;
        z-index:9;
        animation: fang_da2 1s linear 0s infinite ;
        background-image:url('//resource.160nurse.com/canvas/healthy/img/activity/go_1.png');
        background-size:100% 100%;
        &.off{
            animation-play-state:paused;
            background-image:url('//resource.160nurse.com/canvas/healthy/img/activity/go_2.png');
        }
    }
    .rules {
        position: absolute;
        bottom: 5vw;
        color: #fff;
        font-size: 3vw;
        z-index:10;
        left: 50%;
        transform: translateX(-50%);
        image {
            width: 1.5vw;
            vertical-align: middle;
        }
    }
    .decorate {
        &.off{
            view,text{
                animation-play-state:paused;
            }
        }
        >view{
            position:absolute;
            z-index:99;
            bottom:110vh;
            text{
                background-size:100% 100%;
                display:block;
                width:100%;
                height:100%;
            }
        }
        .piao_1{
            animation: piao_1 6s linear 0s 1;
        }
        .piao_2{
            animation: piao_2 6s linear 0s 1;
        }
        .piao_3{
            animation: piao_3 6s linear 0.2s 1;
        }
        .piao_4{
            animation: piao_4 6s linear 0.2s 1;
        }
        .piao_5{
            animation: piao_3 6s linear 0.6s 1;
        }
        .piao_6{
            animation: piao_4 6s linear 0.6s 1;
        }
        .piao_7{
            animation: piao_3 6s linear 1s 1;
        }
        .piao_8{
            animation: piao_4 6s linear 1s 1;
        }
        .piao_10{
            animation: piao_5 6s linear 0s infinite;
        }
        .piao_11{
            animation: piao_6 6s linear 0s infinite;
        }
        .img1 text{
            width:7vw;
            height:10vw;
            background-image:url('//resource.160nurse.com/canvas/healthy/img/activity/tp_1.png');
        }
        .img2 text{
            width:9vw;
            height:4.88vw;
            background-image:url('//resource.160nurse.com/canvas/healthy/img/activity/tp_2.png');
        }
        .img3 text{
            width:7vw;
            height:4.5vw;
            background-image:url('//resource.160nurse.com/canvas/healthy/img/activity/tp_3.png');
        }
        .img4 text{
            width:7vw;
            height:7.3vw;
            background-image:url('//resource.160nurse.com/canvas/healthy/img/activity/tp_4.png');
        }
        .left1{
            left:15vw;
        }
        .left2{
            left:35vw;
        }
        .left3{
            left:55vw;
        }
        .left4{
            left:75vw;
        }
        .left5{
            left:5vw;
        }
        .left6{
            left:40vw;
        }
        .left7{
            left:65vw;
        }
    }
    .tip {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        overflow: hidden;
        bottom: 12vw;
        border-radius: 2vw;
        border: 1px solid #f5f5f5;
        background-color: #E2D0EC;
        width: 70vw;
        z-index: 9999;
        image {
            float: left;
            width: 25vw;
            height: 17vw;
            vertical-align: middle;
        }
        .text {
            padding-top: 3vw;
            display: inline-block;
            overflow: hidden;
            padding-left: 5vw;
            .detail {
                width:21vw;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-size: 3.6vw;
                // color: #fff;
                >text {
                    color: #ff3f4c;
                }
            }
            .tips {
                margin-top: 1vw;
                font-size: 3vw;
            }
        }
        .click{
            line-height:8vw;
            height:8vw;
            padding:0 3.5vw;
            color:#fff;
            background:#00D2C3;
            font-size:3vw;
            border-radius:3vw;
            position:absolute;
            right:2vw;
            top:50%;
            transform:translate(0,-50%);
        }
    }
}
.shadowBox {
    // display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    .luckyInfo {
        // display: none;
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        .fd{
            position: absolute;
            background-color: #fff;
            border-radius: 3vw;
            overflow: hidden;
            left: 0;
            right: 0;
            top: 40vw;
            margin: auto;
            width: 70vw;
            padding-bottom: 5vw;
            transform:scale(0,0);
            &.on{
                transform:scale(1,1);
            }
            image {
                width: 100%;
                height: 24vw;
            }
            .detail {
                font-size: 3.6vw;
                text-align: center;
                line-height: 15vw;
                .num {
                    color: #ff3f4c;
                    width: 15vw;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
            button {
                width: 40vw;
                line-height: 10vw;
                background-color: #00D2C3;
                border-radius: 5vw;
                color: #fff;
                font-size:4vw;
            }
        }
        // .bg{
        //     width:100%;
        //     height:100%;
        // }
        .getPrize{
            font-size:3.6vw;
        }
    }
    .ruleInfo {
        // display: none;
        position: absolute;
        background-color: #fff;
        border-radius: 3vw;
        overflow: hidden;
        left: 0;
        right: 0;
        top: 45vw;
        margin: auto;
        width: 70vw;
        padding: 8vw 5vw;
        view:nth-child(1) {
            font-size: 4.2vw;
            font-weight: 700;
        }
        view:nth-child(2) {
            font-size: 3.6vw;
            margin-top: 6vw;
        }
        view:nth-child(3) {
            font-size: 3.6vw;
            margin-top: 6vw;
        }
        view:nth-child(4) {
            font-size: 3.6vw;
            margin-top: 6vw;
        }
    }
    .exchange {
        position: absolute;
        background-color: #fff;
        border-radius: 3vw;
        overflow: hidden;
        left: 0;
        right: 0;
        top: 45vw;
        margin: auto;
        width: 70vw;
        padding: 5vw 5vw;
        .title {
            font-size: 4vw;
            color: #999999;
            text-align: center;
            margin-bottom: 8vw;
        }
        .detail {
            display: flex;
            justify-content: space-between;
            .rect {
                width: 21vw;
                height: 21vw;
                // background-color: #FF6444;
                background-color: #FFB000;
                border-radius: 2vw;
                color: #fff;
                overflow: hidden;
                &.bg {
                    background-color: #FF6444;
                }
                .top {
                    font-size: 6vw;
                    margin: 3vw 0 3vw 8vw;
                    .num {
                        font-size: 3.73vw;
                    }
                }
                .coin {
                    font-size: 3.73vw;
                    text-align: center;
                }
            }
            .rect:nth-child(2) {
                .top {
                    margin-left: 7vw;
                }
            }
            .rect:nth-child(3) {
                .top {
                    margin-left: 6vw;
                }
            }
        }
        .click {
            width: 45vw;
            background-color: #00D2C3;
            text-align: center;
            color: #fff;
            margin: 0 auto;
            line-height: 12vw;
            font-size: 3.73vw;
            border-radius: 12vw;
            margin-top: 8vw;
        }
    }
}